<template>
  <div class="home_scroll_wrapper" ref="wrapper">
    <div class="content">
      <!-- better-scroll 滚动区域 -->
      <category-icons></category-icons>

      <template v-if="!errShow">
        <home-title recomTitle="推荐景点"></home-title>
        <!-- 景点展示区 -->
        <view-list :view-data="homeDatas.viewsDatas"></view-list>

        <home-title recomTitle="推荐美食"></home-title>
        <!-- 推荐美食 -->
        <food-list :food-datas="homeDatas.foodDatas"></food-list>

        <home-title recomTitle="推荐酒店"></home-title>
        <hotel-list :hotelDatas="homeDatas.hotelDatas"></hotel-list>

        <home-title recomTitle="推荐按摩"></home-title>
        <massage-list :massageDatas="homeDatas.massageDatas"></massage-list>

        <home-title recomTitle="推荐KTV"></home-title>
        <ktv-list :ktvDatas="homeDatas.ktvDatas"></ktv-list>
      </template>

      <!-- 错误提示组件 -->
      <error-message :errShow="errShow"></error-message>
    </div>
  </div>
</template>

<script>
import CategoryIcons from './CategoryIcons';
import BetterScroll from 'better-scroll';
import { mapState } from 'vuex';
import { IndexModel } from '@/models/index.js';
import ViewList from './ViewList';
import HomeTitle from './Sub/HomeTitle.vue';
import ErrorMessage from './Sub/ErrorMes.vue'
import FoodList from './FoodList'
import HotelList from './HotelList'
import MassageList from './MassageList'
import KtvList from './KtvList'

export default {
  name: 'HomeScrollWrapper',
  data() {
    return {
      homeDatas: {
        foodDatas: [],
        hotelDatas: [],
        ktvDatas: [],
        massageDatas: [],
        viewsDatas: [],
      },
      errShow: false,
      // 定义当前城市id
      currentCityId: '0',
    };
  },
  mounted() {
    this.scroll = new BetterScroll(this.$refs.wrapper, {
      scrollY: true,
    });

    this.getHomeData(this.cityId);
  },
  updated() {
    this.scroll.refresh();
  },
  activated () {
    if(this.currentCityId != this.cityId) {
      this.currentCityId = this.cityId
      this.getHomeData(this.currentCityId);
    }
  },
  methods: {
    // 获取首页列表数据
    async getHomeData(cityId) {
      // 发起请求
      const data = await new IndexModel().getHomeDatas(cityId);
      // console.log(data);
      // 数据请求成功
      if (data && data.status === 0) {
        this.errShow = false;
        this.homeDatas.foodDatas = data.data.foodDatas;
        this.homeDatas.hotelDatas = data.data.hotelDatas;
        this.homeDatas.ktvDatas = data.data.ktvDatas;
        this.homeDatas.massageDatas = data.data.massageDatas;
        this.homeDatas.viewsDatas = data.data.viewDatas;
      } else {
        this.errShow = true;
      }
    },
  },
  computed: {
    ...mapState(['cityId']),
  },
  components: {
    CategoryIcons,
    ViewList,
    HomeTitle,
    FoodList,
    HotelList,
    MassageList,
    KtvList,
    ErrorMessage
  },
};
</script>

<style lang="scss" scoped>
.home_scroll_wrapper {
  position: absolute;
  width: 100%;
  height: calc(100% - 0.5rem);
  overflow: hidden;
  .content {
    width: 100%;
  }
}
</style>
